<template>
	<view class="order_index">
		<view class="tab_nav">
			<text :class="params.order_status==-1?'item current':'item'" @click="currentClick(-1)">全部</text>
			<text :class="params.order_status==1?'item current':'item'" @click="currentClick(1)">待支付</text>
			<text :class="params.order_status==3?'item current':'item'" @click="currentClick(3)">待收货</text>
			<text :class="params.order_status==4?'item current':'item'" @click="currentClick(4)">待评论</text>
			<text :class="params.order_status==5?'item current':'item'" @click="currentClick(5)">售后中</text>
			<text :class="params.order_status==6?'item current':'item'" @click="currentClick(6)" style="margin-right: 30rpx;">已完成</text>
		</view>
		<view class="order_index_list">
			<mescroll-body ref="mescrollRef" @up="upCallback" :down="downOption">
				<swiper :style="'height:'+swiperHeight+'px'" @change="swipChange" :current="getCur(params.order_status)" class="swiper-box"> 
					<swiper-item v-for="v in 6" :key="v">
						<view class="item_test_list">
							<view
								v-for="(item,index) in list" :key="index"
								class="order-item"
							>
								<view class="i-top">
									<view class="g-header" @click="$nav('/pages/store/index?id='+item.store.id)">
										<image class="logo" :src="item.store.store_logo||''"></image>
										<text class="name">{{item.store.store_name||'-'}}</text>
										<uni-icons style="margin-left: 15rpx;" type="arrowright" color="#333" size="12"></uni-icons>
									</view>
									<text class="state" >{{item.order_status_cn||'-'}}</text>
								</view>
								
									
								<view 
									class="goods-box-single"
									v-for="(goodsItem, goodsIndex) in item.order_goods" :key="goodsIndex"
								>
									<image class="goods-img" :src="goodsItem.goods_image||''" mode="aspectFill"></image>
									<view class="right">
										<text class="title clamp">{{goodsItem.goods_name||'-'}}</text>
										<text class="attr-box">{{goodsItem.sku_name||'-'}}  x {{goodsItem.number||'1'}}</text>
										<text class="price">{{goodsItem.goods_price||'00.00'}}</text>
									</view>
								</view>
								
								<view class="price-box">
									共
									<text class="num">{{item.order_goods.length||0}}</text>
									种商品 实付款
									<text class="price">{{item.total_price||'0.00'}}</text>
								</view>
								<view class="action-box b-t"  v-if="item.order_status!=6 && item.order_status !=0 && item.order_status !=2">
									<button class="action-btn" v-if="item.order_status==1"  @click="edit_order_status(item.id)">取消订单</button>
									<button class="action-btn pay" v-if="item.order_status==1" @click="pay_order(item.id)">立即支付</button>
									<button class="action-btn recom" v-if="item.order_status>2" @click="$nav('/pagesUser/order/info?id='+item.id)">查看物流</button>
									<button class="action-btn pay" v-if="item.order_status==3" @click="edit_order_status(item.id,4)">确定收货</button>
									<button class="action-btn recom" v-if="item.order_status>3 && item.order_status !=5 && item.refund_status!=2" @click="$nav('/pagesUser/order/refund/index?id='+item.id)">申请售后</button>
									<button class="action-btn " v-if="item.order_status==5 || item.refund_status==2" @click="$nav('/pagesUser/order/refund/form?id='+item.id)">查看售后</button>
									<button class="action-btn pay" v-if="item.order_status==4" @click="$nav('/pagesUser/order/comment?id='+item.id)">前往评论</button>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				params:{
					page:1,
					per_page:10,
					order_status:-1,
				},
				list:[],
				swiperHeight:0,
				downOption:{
					use:false,//是否在初始化完毕之后自动执行下拉回调callback; 默认true
				},
			};
		},
		onLoad(opt) {
			if(!this.$isEmpty(opt.order_status)){
				setTimeout(()=>{
					this.currentClick(opt.order_status);
				},500)
				
			}
			uni.$on('orders',()=>{
				this.mescroll.resetUpScroll();
			})
		},
		methods:{
			upCallback(page){
				this.params.page = page.num; // 页码, 默认从1开始
				this.params.per_page = page.size; // 页长, 默认每页10条
				this.$http(this.$api.orders,this.params).then(res=>{
					if(res.code == 200){
						if(this.params.page == 1){
							this.list = [];
						}
						this.list = this.list.concat(res.data.data||res.data); //追加新数据
						this.mescroll.endBySize(this.params.per_page, res.data.total); 
						if(res.data.total<8){
							this.mescroll.endUpScroll(false)
						}
						if(res.data.total==0){
							this.mescroll.showEmpty();
						}
					}
					this.getElementHeight('.item_test_list')
				})
			},
			currentClick(e){
				this.params.order_status = e;
				this.mescroll.resetUpScroll();
			},
			swipChange(e){
				console.log(e.detail.current)
				switch(e.detail.current){
					case 0:
						this.currentClick(-1);
					break;
					case 1:
						this.currentClick(1);
					break;
					case 2:
						this.currentClick(3);
					break;
					case 3:
						this.currentClick(4);
					break;
					case 4:
						this.currentClick(5);
					break;
					case 5:
						this.currentClick(6);
					break;
				}
			},
			getCur(e){
				let cur = 0;
				switch(e){
					case -1:
						cur = 0;
					break;
					case 1:
						cur = 1;
					break;
					case 3:
						cur = 2;
					break;
					case 4:
						cur = 3;
					break;
					case 5:
						cur = 4;
					break;
					case 6:
						cur = 5;
					break;
				}
				return cur;
			},
			getElementHeight(element) {
				setTimeout(()=>{
					let query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect();
					query.exec((res) => {
						if (!res) {//如果没获取到，再调一次
							this.getElementHeight();
						}else {
							this.swiperHeight = res[0].height;
							console.log(this.swiperHeight) 
						}
					})
				},100)
			},
			pay_order(order_id){
				
				let baseObj = JSON.stringify({order_id:[order_id]});
				var b = new Buffer(baseObj);
				var basecode = b.toString('base64');
				this.$nav("/pagesUser/order/pay?params="+basecode);
			},
			edit_order_status(id,order_status=0){
				let obj = {...this.$api.orders}
				obj.url = obj.url+'/edit_order_status'
				obj.method = 'put'
				this.$http(obj,{id:id,order_status:order_status}).then(res=>{
					this.mescroll.resetUpScroll();
					return this.$toast(res.msg)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
page{
	height: 100%;
}
.clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.order_index{
	height: 100%;
	.tab_nav{
		display: flex;
		position: fixed;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		z-index: 10;
		width: 100%;
		border-top:1px solid #efefef;
		.item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			position: relative;
			&.current{
				color: $uni-color-error;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $uni-color-error;
				}
			}
		}
	}
	
	.order_index_list{
		padding-top: 40px; 
		height: 100%;
		.swiper-box{
			height: calc(100% - 41px);
		}
	}
	.order-item{
		display: flex;
		flex-direction: column;
		padding:0 30rpx;
		background: #fff;
		margin-top: 16rpx;
		.i-top{
			display: flex;
			align-items: center;
			height: 80rpx;
			font-size: 28rpx;
			color: #333;
			position: relative;
			border-bottom: 1px solid #efefef;
			.g-header {
				display: flex;
				flex: 1;
				align-items: center;
				height: 84rpx;
				position: relative;
				border-bottom: 1px solid #efefef;
			}
				
			.logo {
				display: block;
				width: 34rpx;
				height: 34rpx;
				border-radius: 3px; 
			}
				
			.name {
				font-size: 30rpx;
				margin-left: 24rpx;
			}
			.time{
				flex: 1;
			}
			.state{
				color: $uni-color-error;
			}
			.del-btn{
				padding: 10rpx 0 10rpx 36rpx;
				font-size: $uni-font-size-lg;
				color: #999;
				position: relative;
				&:after{
					content: '';
					width: 0;
					height: 30rpx;
					border-left: 1px solid #333;
					position: absolute;
					left: 20rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
		/* 多条商品 */
		.goods-box{
			height: 160rpx;
			padding: 20rpx 0;
			white-space: nowrap;
			.goods-item{
				width: 120rpx;
				height: 120rpx;
				display: inline-block;
				margin-right: 24rpx;
			}
			.goods-img{
				display: block;
				width: 100%;
				height: 100%;
				background-color: #efefef;
				border-radius: 6rpx;
			}
		}
		/* 单条商品 */
		.goods-box-single{
			display: flex;
			padding: 20rpx 0;
			
			.goods-img{
				display: block;
				width: 120rpx;
				height: 120rpx;
				border-radius: 6rpx;
				background-color: #efefef;
			}
			.right{
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 0 30rpx 0 24rpx;
				overflow: hidden;
				.title{
					font-size: 28rpx + 2rpx;
					color: #333;
					line-height: 1;
				}
				.attr-box{
					font-size: $uni-font-size-sm + 2rpx;
					color: #999;
					padding: 10rpx 0rpx;
				}
				.price{
					font-size: 28rpx + 2rpx;
					color: #333;
					&:before{
						content: '￥';
						font-size: $uni-font-size-sm;
						margin: 0 2rpx 0 0rpx;
					}
				}
			}
		}
		
		.price-box{
			display: flex;
			justify-content: flex-end;
			align-items: baseline;
			padding: 20rpx 30rpx;
			font-size: $uni-font-size-sm + 2rpx;
			border-bottom: 1px solid #efefef;
			color: #999;
			.num{
				margin: 0 8rpx;
				color: #333;
			}
			.price{
				font-size: $uni-font-size-lg;
				color: #333;
				&:before{
					content: '￥';
					font-size: $uni-font-size-sm;
					margin: 0 2rpx 0 8rpx;
				}
			}
		}
		.action-box{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			height: 100rpx;
			position: relative;
			// padding-right: 30rpx;
		}
		.action-btn{
			width: 160rpx;
			height: 60rpx;
			margin: 0;
			margin-left: 24rpx;
			padding: 0;
			text-align: center;
			line-height: 60rpx;
			font-size: $uni-font-size-sm + 2rpx;
			color: #333;
			background: #fff;
			&:after{
			}
			&.pay{
				color:#fff;
				background-color: $uni-color-error;
			}
			&.recom{
				background: #fff9f9;
				color: $uni-color-error;
				&:after{
					border-color: #f7bcc8;
				}
			}
		}
	}
}
</style>
